<!DOCTYPE html>
<html>
	<head>
		<title>Comidapp</title>
        <meta charset="UTF-8" />
		<link rel="stylesheet" href="css/jquery-theme/themes/smartRest.min.css" />
        <link rel="stylesheet" href="css/jquery-theme/themes/jquery.mobile.icons.min.css" />   
        <link rel="stylesheet" href="css/customStyles.css" /> 
        <link rel="stylesheet" href="css/index.css" /> 
        <link rel="stylesheet" href="scripts/jquery/jquery.mobile.structure-1.4.5.min.css" />
        
        <!-- uncoment viewport meta tag, if targeting Android 4.x.x devices -->
        <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
		<script src="cordova.js" type="text/javascript"></script>
		<script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="scripts/jquery/jquery.mobile-1.4.5.min.js"></script>
		<script type='application/javascript' src='scripts/fastclick.js'></script>
		<!--script type="text/javascript" charset="utf-8" src="scripts/jso.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/face.js"></script-->
        <script>
          $(function() { 
            $.mobile.defaultHomeScroll = 0;
          });
        </script>
        <script type="text/javascript" src="js/config.js"></script>
		<script type="text/javascript" src="js/utils.js"></script>
		<script type="text/javascript" src="js/loadImages.js"></script>
		
		
		<script type="text/javascript" src="js/smartRestData.js" ></script>
		<script type="text/javascript" src="js/login.js"></script>
		<script type="text/javascript" src="js/signUp.js"></script>
		<script type="text/javascript" src="js/llave.js"></script>
		<script type="text/javascript" src="js/mesasActivas.js"></script>
		<script type="text/javascript" src="js/categories.js"></script>
		<script type="text/javascript" src="js/orden.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
		<script type="text/javascript" src="js/admonCaja.js"></script>
		<!--script src="scripts/seatmapdrawing.js" type="text/javascript"></script-->
		<!--script src="scripts/main.js" type="text/javascript"></script-->
        
        <!-- Default Stylesheet -->
        <!--link rel="stylesheet" href="styles/main.css" /-->
        <!-- Phone 320x480 High DPI (aka Retina) -->
		<link rel="stylesheet" media="only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio:2)" href="styles/phone-480.css" type="text/css" />
        <!-- Phone 480x800 Medium DPI (aka Samsung Galaxy S II Skyrocket) -->
        <link rel="stylesheet" media="only screen and (min-device-width: 320px) and (max-device-width: 508px) and (-webkit-device-pixel-ratio:1.5)" href="styles/phone-800.css" type="text/css" />
        <!-- Tablet 768x1024 Low DPI (aka iPad 1 & 2") -->
        <link rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-device-pixel-ratio:1)" href="styles/tablet-1024-ldpi.css" type="text/css" />
        <!-- Phone 720x1280 High DPI (aka Google Nexus) -->
        <link rel="stylesheet" media="only screen and (min-device-width: 720px) and (max-device-width: 1280px) and (-webkit-device-pixel-ratio:2)" href="styles/phone-1280.css" type="text/css" />
	</head>
    
    <body>
		
		<!-- home page -->
		<div id="homePage" data-role="page" data-fullscreen="true">
			<div data-role="header" data-position="fixed">
				<div id="headerPlus"></div>
				<div class="header-logo">
					<div id="custom-border-radius">
						<a>&nbsp;&nbsp;&nbsp;</a>
						<a href="#defaultpanel" id="menuButton" class="ui-btn ui-icon-bars ui-btn-icon-notext ui-corner-all">No text</a>
						
					</div></div></div><!-- /header -->
			
			<div role="main" class="ui-content">
				<form><div class="ui-field-contain">	
						<ul data-role="listview" data-inset="true">
							<li><a href="#" class="ui-btn ui-corner-all"><img src="img/best-coffee.png"/><h2>Promociones</h2></a></li>
							<li><a href="#" class="ui-btn ui-corner-all"><img src="img/cheers.png"/><h2>Especialidades</h2></a></li>
							<li><a href="#" class="ui-btn ui-corner-all"><img src="img/holiday.png"/><h2>Recomendaciones</h2></a></li>
							<li><a href="#" class="ui-btn ui-corner-all"><img src="img/rewards.png"/><h2>Preferencias</h2></a></li>
			</ul></div></form></div><!-- /content -->

			<div data-role="footer" id="myFooter"  data-position="fixed" style="text-align:center;"></div><!-- /footer-->
		</div><!-- /page -->
		
		
		<!-- categories page -->
		<div id="categoriesPage" data-role="page">
			<div data-role="header" data-position="fixed" >
				<div id="headerPlus"></div>
				<div class="header-logo">
					<div id="custom-border-radius">
						<a>&nbsp;&nbsp;&nbsp;</a>
						<a href="#defaultpanel" id="menuButton" class="ui-btn ui-icon-bars ui-btn-icon-notext ui-corner-all">No text</a>
			</div></div></div><!-- /header --><div data-role="footer" id="myFooter"  data-position="fixed" style="text-align:center;"></div><!-- /footer-->
			
			<div role="main" class="ui-content">
				<form><div class="ui-field-contain">
					<div id="listBottonCategories"></div>
					
					<ul data-role="listview" id="categoriesList" data-inset="true"></ul>
			</div></form></div><!-- /content -->

			<div data-role="footer" id="myFooter"  data-position="fixed" style="text-align:center;"></div><!-- /footer-->
		</div><!-- /page -->
		
		<!-- products page -->
		<div id="productsPage" data-role="page">
			<div data-role="header" data-position="fixed">
				<div id="headerPlus"></div>
				<div class="header-logo">
					<div id="custom-border-radius">
						<a>&nbsp;&nbsp;&nbsp;</a>
						<a href="#defaultpanel" id="menuButton" class="ui-btn ui-icon-bars ui-btn-icon-notext ui-corner-all">No text</a>
			</div></div></div><!-- /header -->
			
			<div role="main" class="ui-content">
				<form><div class="ui-field-contain">
					<div id="listBottonProducts"></div>
						<ul data-role="listview" id="productsList" data-inset="true"></ul>
			</div></form></div><!-- /content -->

			<div data-role="footer" id="myFooter"  data-position="fixed" style="text-align:center;"></div><!-- /footer-->
		</div><!-- /page -->
		
		<!-- products detail page -->
		<div id="productDetailPage" data-role="page">
			<div data-role="header" data-position="fixed">
				<div id="headerPlus"></div>
				<div class="header-logo">
					<div id="custom-border-radius">
						<a>&nbsp;&nbsp;&nbsp;</a>
						<a href="#defaultpanel" id="menuButton" class="ui-btn ui-icon-bars ui-btn-icon-notext ui-corner-all">No text</a>
			</div></div></div><!-- /header -->
			
			<div role="main" class="ui-content"><form>
				<h3 id="mesaOrdenText2" class="text-red"></h3>	
					<div class="ui-field-contain">
						<div>
							<div id="productDetailDiv" class="inner">
								<h3 id="nombreProducto">titulo</h3>
								<p id="descripcionProducto"></p>
								<div id="textPrecios"></div>
							</div>
						</div>
						<div><br></div>
						<div><div class="inner-no-border" id="spanVariaciones">
							</div></div>
						<div><div class="inner-no-border" id="spanIng">
						</div></div>
						<div><div class="inner-no-border" id="sizesProduct">
							</div></div>
						<div class="right-align inner-no-border"><a id="agregarPlatillo" class="ui-btn ui-btn-inline ui-mini ui-shadow ui-icon-plus ui-btn-icon-right">Agregar a la orden</a></div>
						<div><br></div>
						<div data-role="popup" id="popupMAddProduct">
							<p>Platillo agregado.</p>
							</div>
						<div id="imageProduct" class="center"></div>
						
			</ul></div></form></div><!-- /content -->

			<div data-role="footer" id="myFooter"  data-position="fixed" style="text-align:center;"></div><!-- /footer-->
		</div><!-- /page -->
		
		<!-- Asignar mesa page -->
		<div id="asignarMesaPage" data-role="page">
			<div data-role="header" data-position="fixed">
				<div id="headerPlus"></div>
				<div class="header-logo">
					<div id="custom-border-radius">
						<a>&nbsp;&nbsp;&nbsp;</a>
						<a href="#defaultpanel" id="menuButton" class="ui-btn ui-icon-bars ui-btn-icon-notext ui-corner-all">No text</a>
					</div>
				</div>
			</div><!-- /header -->
			
			<div role="main" class="ui-content">
				<form id="asignarMesaForm">
					<div class="ui-field-contain"><label for="numMesa">Número de mesa:</label><select name="numMesa" id="numMesa" data-mini="true"></select></div>
					<div class="ui-field-contain"><label for="numComensales">Número de comensales:</label><input type="number" data-clear-btn="true" data-mini="true" name="numComensales" id="numComensales" value=""></div>
					<div class="ui-field-contain"><label for="descripcion">Descripción:</label><input type="text" data-clear-btn="true" data-mini="true" name="descripcion" id="descriptMesa" value=""></div>
					<a id="asignarMesaButton" class="ui-btn ui-btn-d ui-shadow ui-corner-all ui-mini">Generar llave</a>
					<br>
					<div>
						<div id="mensajeLlaveGen"  class="innerShort">
							<h2 id="mensajeAsignarMesaLlave" class="center"></h2>
							<h4 id="llaveStr" class="center text-red"></h4>
						</div>
					</div>
				</form>
			</div><!-- /content -->

			<div data-role="footer" id="myFooter"  data-position="fixed" style="text-align:center;"></div><!-- /footer-->
		</div><!-- /page -->
		
		<!-- mesas activas page -->
		<div id="mesasActivasPage" data-role="page">
			<div data-role="header" data-position="fixed">
				<div id="headerPlus"></div>
				<div class="header-logo">
					<div id="custom-border-radius">
						<a>&nbsp;&nbsp;&nbsp;</a>
						<a href="#defaultpanel" id="menuButton" class="ui-btn ui-icon-bars ui-btn-icon-notext ui-corner-all">No text</a>
			</div></div></div><!-- /header -->
			
			<div role="main" class="ui-content"><form>
					<div class="ui-field-contain">
						<div>
							<ul data-role="listview" id="mesasActivasList" data-filter="true" data-filter-placeholder="Mesas activas..." data-inset="true">
							</ul>
						</div>
						<div></div>
						
			</ul></div></form></div><!-- /content -->

			<div data-role="footer" id="myFooter"  data-position="fixed" style="text-align:center;"></div><!-- /footer-->
		</div><!-- /page -->
		
		
		<!-- products Orden page -->
		<div id="productsOrdenPage" data-role="page">
			<div data-role="header" data-position="fixed">
				<div id="headerPlus"></div>
				<div class="header-logo">
					<div id="custom-border-radius">
						<a>&nbsp;&nbsp;&nbsp;</a>
						<a href="#defaultpanel" id="menuButton" class="ui-btn ui-icon-bars ui-btn-icon-notext ui-corner-all">No text</a>
			</div></div></div><!-- /header -->
			
			<div role="main" class="ui-content">
					<h3 id="mesaOrdenText" class="text-red"></h3><h3 id="estatusMesaText" class="text-red"></h3>		
					<form><h4>Pedido actual:</h4>
					<span><p id="pedidoConProductos" style="text-indent:20px; font-size:smaller;"></p></span>
					<div><ul data-role="listview" id="productsListOrdenActual" data-split-icon="delete" data-theme="a" data-split-theme="b" data-inset="true"></ul></div>
					
					<h4>Nuevo Pedido:</h4>
					<span><p id="nuevoPedidoConProductos" style="text-indent:20px; font-size:smaller;"></p></span>
					<div><ul data-role="listview" id="productsListOrdenNuevo" data-split-icon="delete" data-theme="a" data-split-theme="b" data-inset="true"></ul></div>
					
					<a class="ui-btn ui-icon-plus ui-btn-icon-left ui-corner-all" id="toAddProductPage" href="#categoriesPage">Añadir Platillos</a>
					<a class="ui-btn ui-icon-action ui-btn-icon-left ui-corner-all" id="addToOrdenPrint" href="#">Enviar Solicitud</a>
					<a id="cerrarCuentaPop" href="#confirmarCerraropUp" data-rel="popup" data-position-to="window" data-transition="pop" class="ui-btn ui-icon-tag ui-btn-icon-left ui-corner-all" >Cerrar cuenta</a>
					<a class="ui-btn ui-icon-shop ui-btn-icon-left ui-corner-all" id="toPagarCuentaPage" href="#pagarCuentaPage">Pagar cuenta</a>
					<!--ul data-role="listview" data-inset="true"><li><a id="addToOrdenPrint" href="#"><img src="/img/icons/cutlery6_32.png" alt="Add" class="ui-li-icon ui-corner-none">Enviar Solicitud</a></li></ul>
					<ul data-role="listview" data-inset="true"><li><a id="closeOrderButton"><img src="/img/icons/cutlery6_32.png" alt="Add" class="ui-li-icon ui-corner-none">Cerrar cuenta</a></li></ul!-->
			</form></div><!-- /content -->
			
			<div data-role="popup" id="confirmarCerraropUp" data-overlay-theme="b" data-theme="b" style="max-width:400px;">
				<div data-role="header" data-theme="a">
				<h1 id="popOrdenTitle">Cerrar cuenta</h1>
				</div>
				<div role="main" class="ui-content">
					<h3 class="ui-title" id="popOrdenQuestion">¿Desea cerrar la cuenta?</h3>
					<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancelar</a>
					<a id="closeOrderButton" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">Cerrar cuenta</a>
				</div>
			</div>

			<div data-role="footer" id="myFooter"  data-position="fixed" style="text-align:center;"></div><!-- /footer-->
		</div><!-- /page -->
		
		<!-- products orden detail page -->
		<div id="productOrdenDetailPage" data-role="page">
			<div data-role="header" data-position="fixed">
				<div id="headerPlus"></div>
				<div class="header-logo">
					<div id="custom-border-radius">
						<a>&nbsp;&nbsp;&nbsp;</a>
						<a href="#defaultpanel" id="menuButton" class="ui-btn ui-icon-bars ui-btn-icon-notext ui-corner-all">No text</a>
			</div></div></div><!-- /header -->
			
			<div role="main" class="ui-content"><form>
					<div class="ui-field-contain">
						<div>
							<div id="productOrdenDetailDiv" class="inner">
								<h3 id="nombreProducto">titulo</h3>
								<p id="descripcionProducto"></p>
								<div id="textPrecios"></div>
							</div>
						</div>
						<div><br></div>
						<div><div class="inner-no-border" id="spanVariacionesOrden">
							</div></div>
						<div><div class="inner-no-border" id="spanIngOrden">
						</div></div>
						<div><div class="inner-no-border" id="sizesProductOrden">
							</div></div>
						<div class="right-align inner-no-border"><a id="editarPlatilloButton" class="ui-btn ui-btn-inline ui-mini ui-shadow ui-icon-plus ui-btn-icon-right">Editar platillo</a></div>
						<div class="right-align inner-no-border"><a id="borrarPlatilloButton" href="#productsOrdenPage" class="ui-btn ui-btn-inline ui-mini ui-shadow ui-icon-plus ui-btn-icon-right">Borrar platillo</a></div>
						<div><br></div>
						<div id="imageProduct" class="center"></div>
						
			</ul></div></form></div><!-- /content -->

			<div data-role="footer" id="myFooter"  data-position="fixed" style="text-align:center;"></div><!-- /footer-->
		</div><!-- /page -->
		
		<!-- pagar cuenta page -->
		<div id="pagarCuentaPage" data-role="page">
			<div data-role="header" data-position="fixed">
				<div id="headerPlus"></div>
				<div class="header-logo">
					<div id="custom-border-radius">
						<a>&nbsp;&nbsp;&nbsp;</a>
						<a href="#defaultpanel" id="menuButton" class="ui-btn ui-icon-bars ui-btn-icon-notext ui-corner-all">No text</a>
			</div></div></div><!-- /header -->
			
			<div role="main" class="ui-content"><form>
					<div class="ui-field-contain">
						<div>
							<h3 id="mesaOrdenText" class="text-red"></h3>	
							<label for="tipoPago">Tipo de pago:</label>
							<select name="tipoPago" id="tipoPagoList" data-mini="true">
							
								<option value="0">Efectivo</option>
								<option value="1">Tarjeta de crédito</option>
							</select>
							<label for="propina">Propina:</label>
							<input type="number" name="porpina" id="propina" value="" step="0.01" min="0">
							<a id="pagarCuentaPop" href="#confirmarPagarPup" data-rel="popup" data-position-to="window" data-transition="pop" class="ui-btn ui-btn-d ui-shadow ui-corner-all ui-mini">Pagar cuenta</a>
						</div>
						<div></div>
						
						<div data-role="popup" id="confirmarPagarPup" data-overlay-theme="b" data-theme="b" style="max-width:400px;">
							<div data-role="header" data-theme="a">
							<h1>Pagar cuenta</h1>
							</div>
							<div role="main" class="ui-content">
								<h3 class="ui-title">¿Desea pagar la cuenta?</h3>
								<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancelar</a>
								<a id="pagarCuentaButton" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">Pagar cuenta</a>
							</div>
						</div>
						
			</ul></div></form></div><!-- /content -->

			<div data-role="footer" id="myFooter"  data-position="fixed" style="text-align:center;"></div><!-- /footer-->
		</div><!-- /page -->
		
		<!-- caja page -->
		<div id="cajaPage" data-role="page">
			<div data-role="header" data-position="fixed">
				<div id="headerPlus"></div><div class="header-logo"><div id="custom-border-radius"><a>&nbsp;&nbsp;&nbsp;</a><a href="#defaultpanel" id="menuButton" class="ui-btn ui-icon-bars ui-btn-icon-notext ui-corner-all">No text</a>
			</div></div></div><!-- /header -->
			
			<div role="main" class="ui-content"><form>
					<div class="ui-field-contain">
						<div id="abrirCajaContent">
							<h3>Abrir caja</h3>
							<label for="montoInicial">Monto inicial:</label>
							<input type="number" name="text-basic" id="montoInicial" value="" step="0.01" min="0">
							<a id="toMontoInicialPop" href="#confirmarCajaPop" data-rel="popup" data-position-to="window" data-transition="pop" class="ui-btn ui-btn-d ui-shadow ui-corner-all ui-mini">Abrir caja</a>
						</div>
						<div id="cerrarCajaContent">
							<h3>Cerrar caja</h3>
							<h1 id="montoCierre"></h1>
							<a id="toMontoInicialPop" href="#confirmarCajaPop" data-rel="popup" data-position-to="window" data-transition="pop" class="ui-btn ui-btn-d ui-shadow ui-corner-all ui-mini">Cerrar caja</a>
						</div>
	
						<div data-role="popup" id="confirmarCajaPop" data-overlay-theme="b" data-theme="b" style="max-width:400px;">
							<div data-role="header" data-theme="a">
							<h1 id="tituloCajaPop">Abrir caja</h1>
							</div>
							<div role="main" class="ui-content">
								<h3 id="preguntaCajaPop" class="ui-title">¿Desea abrir la caja?</h3>
								<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b">Cancelar</a>
								<a id="abrirCajaButton" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">Abrir caja</a>
								<a id="cerrarCajaButton" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">Cerrar caja</a>
							</div>
						</div>
						
						<div data-role="popup" id="popupBasicAbrirCaja"><p>Se abrió la cuenta con éxito</p></div>
						<div data-role="popup" id="popupBasicCerrarCaja"><p>Se cerró la cuenta con éxito</p></div>
						
			</ul></div></form></div><!-- /content -->

			<div data-role="footer" id="myFooter"  data-position="fixed" style="text-align:center;"></div><!-- /footer-->
		</div><!-- /page -->
		
		<!-- logon page -->
		 <div id="logonPage" data-role="page" class="pageLogin">
			<div role="main" class="ui-content-login">
				<form id="loginForm">
					<div class="ui-field-contain">
						<div class="logo-login" ><img src="/img/logo/logo_42.jpg" style="width:100px; heigth:100px"></div>
						<!-- class="textBody">Favor de logearse:</a-->
						<input type="text" name="correo" id="correo" placeholder="usuario" value="" data-mini="true">
						<input type="password" name="password" id="password" placeholder="password" value="" autocomplete="off" data-mini="true">
						<div>
							<a id="entrarButton" data-rel="popup" class="ui-btn ui-btn-d ui-shadow ui-corner-all ui-mini">Entrar</a>
							<div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="a" data-dismissible="false" style="max-width:400px;">
								<div role="main" class="ui-content">
									<h3 id="mensaje" class="ui-title">El correo o password son incorrectos.</h3>
									<p>Favor de intentar de nuevo.</p>
									<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-b" data-rel="back">Intentar de nuevo</a>
								</div>
							</div>
						</div>
					</div>
				</form>
			</div><!-- /content -->
		</div><!-- /page -->
		
		 <script>
			$(function() {
				FastClick.attach(document.body);
			});
			var sData = new smartData(0000);
			var loginapp = new loginApp();
			var signUp = new signUpApp();
			var categoriesapp = new categoriesApp();
			var llaveapp = new llaveApp();
			var ordenapp = new ordenApp();
			var mesasactivas = new mesasActivasApp();
			var admonCaja = new admonCajaApp();
			var index = new indexApp();
			index.run();
		</script>
    </body>
</html>
